<template>
    <div style="background-color: #F6CC07;height:100%;">
        <el-card class="box-card" style="height:100%;background-color: #DBDBE5;">
            <div slot="header" class="clearfix" style="text-align: center;">
                <!-- <hr> -->
                <span ><font color="#B99D67" size=6>{ 酒店服务 }</font></span>
                <!-- <hr> -->
            </div>
            <el-row :gutter="20">
                <div style="display: flex; margin-top: 20px; height: 100%;">
                    <el-col :span="6" >
                            <transition name="el-zoom-in-center">
                                <div v-show="show2" style="height: 400px;width:400px;background-color: #1A1819;" class="transition-box">
                                    <div class="demo-fit">
                                        <div class="block" v-for="fit in fits" :key="fit">
                                            <el-avatar shape="square" :size="200" :fit="fit" :src="url"></el-avatar>
                                        </div>
                                    </div>
                                    <span style="padding-top:10px;"><font color="#B99D67" style="padding:15px;" size=5>客房服务</font></span>
                                    <div style="padding-top:10px;">
                                        <font color="#B99D67">
                                            在这里你可以享受非一般的舒，<br>
                                            享受非这里有非一搬的舒适感，<br>
                                            享受非这里有非一搬的舒适感，<br>
                                            享受非这里有非一搬的舒适感。<br>
                                        </font>
                                    </div>
                                </div>
                            </transition>
                    </el-col>
                    <el-col :span="6">
                            <transition name="el-zoom-in-center">
                                <div v-show="show2" style="height: 400px;width:400px;background-color: #EBE3E7;" class="transition-box">
                                    <div class="demo-fit">
                                        <div class="block" v-for="fit in fits" :key="fit">
                                            <el-avatar shape="square" :size="200" :fit="fit" :src="url1"></el-avatar>
                                        </div>
                                    </div>
                                    <span style="padding-top:10px;"><font color="#B99D67" style="padding:15px;" size=5>特色服务</font></span>
                                    <div style="padding-top:10px;">
                                        <font color="#B99D67">
                                            <p>
                                                在这里你可以享受非一般的舒，<br>
                                                在这里你可以享受非一般的舒，<br>
                                                在这里你可以享受非一般的舒，<br>
                                                在这里你可以享的舒的舒的舒。<br>
                                            </p>
                                        </font>
                                    </div>
                                </div>
                            </transition>
                    </el-col>
                    <el-col :span="6">
                            <transition name="el-zoom-in-center">
                                <div v-show="show2" style="height: 400px;width:400px;background-color: #ECB8D2;" class="transition-box">
                                    <div class="demo-fit">
                                        <div class="block" v-for="fit in fits" :key="fit">
                                            <el-avatar shape="square" :size="200" :fit="fit" :src="url2"></el-avatar>
                                        </div>
                                    </div>
                                    <span style="padding-top:10px;"><font color="#B99D67" style="padding:15px;" size=5>休闲服务</font></span>
                                    <div style="padding-top:10px;">
                                        <font color="#B99D67">
                                            在这里你可以享受非一般的舒，<br>
                                            享受非这里有非一搬的舒适感，<br>
                                            享受非这里有非一搬的舒适感，<br>
                                            享受非这里有非一搬的舒适感。<br>
                                        </font>
                                    </div>
                                </div>
                            </transition>
                    </el-col>
                    <el-col :span="6">
                            <transition name="el-zoom-in-center">
                                <div v-show="show2" style="height: 400px;width:400px;background-color: #715865;" class="transition-box">
                                    <div class="demo-fit">
                                        <div class="block" v-for="fit in fits" :key="fit">
                                            <el-avatar shape="square" :size="200" :fit="fit" :src="url3"></el-avatar>
                                        </div>
                                    </div>
                                    <span style="padding-top:10px;"><font color="#B99D67" style="padding:15px;" size=5>餐饮服务</font></span>
                                    <div style="padding-top:10px;">
                                        <font color="#B99D67">
                                            在这里你可以享受非一般的舒，<br>
                                            享受非这里有非一搬的舒适感，<br>
                                            享受非这里有非一搬的舒适感，<br>
                                            享受非这里有非一搬的舒适感。<br>
                                        </font>
                                    </div>
                                </div>
                            </transition>
                    </el-col>
                </div>
            </el-row>
            <div style="padding-top:100px;">
                <hr color="white">
            </div>
            
        </el-card>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            show2 : true,
            fits: ['fill'],
            url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581945408475&di=1f8bfdaabdf67fe591d6e4def7b2b7d3&imgtype=0&src=http%3A%2F%2Fstatic-xiaoguotu.17house.com%2Fxgt%2Fm%2F13%2F1462684284101.jpg',
            url1 : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581946731730&di=e557e8658aa4a3a92b3fa790ad432b3f&imgtype=0&src=http%3A%2F%2Fcdn.feeyo.com%2Fnews%2F130822%2F13082211095486.jpg',
            url2 : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581946774040&di=813c12cf51e7d30a365e37128cb57203&imgtype=0&src=http%3A%2F%2Fpix10.agoda.net%2FhotelImages%2F1179634%2F-1%2F97f9eb95ed72f813ba4129bc8eb3a26a.jpg%3Fs%3D1024x768',
            url3 : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581946837680&di=7ad785266090193054b3b234d251907d&imgtype=0&src=http%3A%2F%2Fimg1.sooshong.com%2Fpics%2F201601%2F20%2F2016120144410868.jpg'
        }
    },
    created() {
    },
}
</script>

<style>
.sp1 {
    color: #333;
    text-align: center;
    padding-top: 50px;
    font-weight : bold;
  }

  /* .el-main {
    background-color: #F6CC07;
    color: #333;
    text-align: center;
  } */
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>